<template>
  <!-- components: Header -->
  <nav class = "navbar navbar-dark bg-primary mb-4 px-4">
    <div class = "navbar-content justify-content-between">
      <router-link class = "navbar-brand" to = "/">知乎</router-link>
    <ul
      class = "list-inline mb-0"
      v-if ="!user.isLogin"
    >
      <li class = "list-inline-item">
        <router-link class = "btn btn-outline-light my-2" to = "/login">登录</router-link>
      </li>
      <li class = "list-inline-item">
        <router-link class = "btn btn-outline-light my-2" to = "/signup">注册</router-link>
      </li>
    </ul>
    <ul v-else class = "list-inline mb-0">
      <li class = "list-inline-item">
        <drop-down v-bind:title ="`Hi ${user.nickName}`">
          <drop-down-item>
            <router-link v-bind:to="`/column${user.column}`" class="dropdown-item">我的专栏</router-link>
          </drop-down-item>
          <drop-down-item>
            <router-link to="/create" class = "dropdown-item">新建文章</router-link>
          </drop-down-item>
          <drop-down-item disabled>
            <a href="#" class = "dropdown-item">编辑资料</a>
          </drop-down-item>
          <drop-down-item>
            <a href="#" class = "dropdown-item">退出登陆</a>
          </drop-down-item>
        </drop-down>
      </li>
    </ul>
    </div>
  </nav>
</template>

<script lang = "ts">
import { defineComponent, PropType } from 'vue'

// 导入 组件
import DropDown from '@/components/DropDown.vue'
import dropDownItem from '@/components/DropDownItem.vue'
// 导入 数据
import { UserProps } from '@/assets/js/store'

// 对setup函数进行封装，返回options的对象
export default defineComponent({
  // 页面名称
  name: 'GlobalHeader',
  // 注册需要使用的组件
  components: {
    DropDown,
    dropDownItem
  },
  // 传递数据
  props: {
    // 用户数据
    user: {
      type: Object as PropType<UserProps>,
      required: true
    }
  }
})
</script>

<style lang = "css" scoped>
.navbar{
  display: block;
  padding-top: 0;
  padding-bottom: 0;
}
.navbar-content{
  display: flex;
  align-items: center;
  padding: .2rem 0;
  padding-left: 1rem;
  padding-right: 1rem;
  max-width: 1000px;
  margin: 0 auto;
}
.dropdown-option{
  text-align: center;
}
.dropdown-item{
  color: #333;
  text-decoration: none;
}
.dropdown-option.is-disabled * {
    color: #6c757d;
    pointer-events: none;
    background-color: transparent;
  }
</style>
